<template>
  <div id="person-center">
    <div>
      <div class="tabbar-center">
        <img @click="personMessage" class="img-tool" src="../../static/img/shezhi@2x.png" />
        <div class="head-portrait">
          <div class="headBox">
            <div class="headImg">
              <img v-if="item.headImageUrl" class="header-phone" :src="item.headImageUrl" />
              <img v-else class="header-phone" src="../../static/img/installheaderimg.jpg" />
            </div>
            <p class="headId">ID:<span>{{item.userId}}</span></p>
          </div>
          <p class="headTxt">您好，<span>{{item.userName}}</span></p>
          <p class="balance" @click="myearnings">我的余额：{{item.balAmt | fixed}}元</p>
        </div>
        <flexbox>
          <flexbox-item><div class="flex-demo">推荐导师：<span>{{item.inviterName | mentor}}</span></div></flexbox-item>
          <flexbox-item>
            <div class="flex-demo" @click="myprentice">我的徒弟：<span>{{item.inviterCnt}} 人</span></div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="relation-earnings">
        <card>
          <div slot="content" class="card-demo-flex card-demo-content01">
            <div class="vux-1px-l vux-1px-r" @click="mycredit">
              <img src="../../static/img/woyaotixian@2x.png" />
              <br/>
              我要提现
            </div>
            <div class="vux-1px-r" @click="clientlist">
              <img src="../../static/img/kehuliebiao@2x.png" />
              <br/>
              客户列表
            </div>
            <div class="vux-1px-r" @click="myearnings">
              <img src="../../static/img/wodeshouyi@2x.png" />
              <br/>
              收支明细
            </div>
          </div>
        </card>
      </div>
    </div>
    <div class="circle"></div>
    <flexbox :gutter="0" class="notice_center">
      <flexbox-item :span="2">公告</flexbox-item>
      <flexbox-item>
        <group class="notice">
          <cell>
            <marquee :duration="500" :direction="'up'">
              <marquee-item v-for="(mess,index) in messagelist" :key="index" @click.native="messevent(index)"><span>{{mess.title}}</span></marquee-item>
            </marquee>
          </cell>
        </group>
      </flexbox-item>
      <flexbox-item :span="3"><router-link to="/center/notice">查看更多</router-link></flexbox-item>
    </flexbox>
    <ul class="tool-box">
      <li @click="creditguest"><img src="../../static/img/xindaike@2x.png" /><p>我要赚钱</p></li>
      <li @click="invite"><img src="../../static/img/yaoqinghaoyou@2x.png" /><p>邀请赚钱</p></li>
      <li @click="bazaar"><img src="../../static/img/tiaozhaoshichang@2x.png" /><p>跳蚤市场</p></li>
      <li @click="Creditcircle"><img src="../../static/img/xindaiquan@2x.png" /><p>信贷圈</p></li>
      <li @click="newfingerpost"><img src="../../static/img/xinshouzhinan@2x.png" /><p>新手指南</p>
      <li @click="awardClick"><img src="../../static/img/jianglishuoming@2x.png" /><p>奖励说明</p></li>
      <li @click="consult"><img src="../../static/img/zixun@2x.png" /><p>咨询小蜜</p></li>
      <li @click="toolClick"><img src="../../static/img/gongjuxiang@2x.png" /><p>工具箱</p></li>
      <li @click="easyClick"><img src="../../static/img/qingsongyike@2x.png" /><p>轻松一刻</p></li>
      <div class="clear"></div>
    </ul>
  </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import Add from '../comment/Add'
import { Flexbox, FlexboxItem, Card , Group, Cell, Marquee, MarqueeItem } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  data () {
    return {
      item: {},
      messagelist: [],
      tokenval: '',
      ImgUrl: '',
      asyncCount: 0
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    Card,
    Add,
    Marquee,
    MarqueeItem,
    Group,
    Cell
  },
  mounted () {
    setTimeout(() => {
      this.asyncCount = 5
    }, 1000)
  },
  filters: {
    mentor: function (value) {
      if (value === '' || value === undefined) {
        value = '平台'
      }
      return value
    }
  },
  created () {
    window.document.title = '个人中心'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    var params = {
      Tokenuser: this.tokenval,
      userid: this.$store.state.userID,
      timestamp: timeStamp
    }
    api.person(params).then(res => {
      if (res.status === '200') {
        this.item = res.data
      } else {
        this.$vux.toast.show({
          text: res.message,
          type: 'warn',
          width: '4rem'
        })
      }
    })
    api.notice().then(res => {
      if (res.status === 200) {
        if (res.data.list) {
          var notice = res.data.list
          this.messagelist = notice.slice(0, 3)
        } else {
          this.$vux.toast.show({
            text: '暂无公告',
            type: 'warn',
            width: '4rem'
          })
        }
      } else {
        this.$vux.toast.show({
          text: res.message,
          type: 'warn',
          width: '4rem'
        })
      }
    })
  },
  methods: {
    // 公告
    messevent (index) {
      this.$router.push('/notice/detail?shareParam=share&notice_id=' + this.messagelist[index].id)
    },
    myprentice () {
      this.$router.push('/center/team') // 我的徒弟
    },
    // 个人信息
    personMessage () {
      this.$router.push('/center/setting')
    },
    // 我要提现
    mycredit () {
      this.$router.push('/center/withdraw')
    },
    // 客户列表
    clientlist () {
      this.$router.push('/center/customer')
    },
    // 收益明细
    myearnings () {
      this.$router.push('/center/balancepayment')
    },
    // 信贷客
    creditguest () {
      window.location.href = '/creditGuest/index'
    },
    // 信贷圈
    Creditcircle () {
      window.location.href = '/circle/index'
    },
    // 跳骚市场
    bazaar (index) {
      window.location.href = '/fly/index'
    },
    // 邀请好友
    invite () {
      window.location.href = '/center/invitation'
    },
    // 新手指南
    newfingerpost () {
      window.location.href = '/center/guide?shareParam=share'
    },
    // 奖励说明
    awardClick () {
      window.location.href = '/center/award?shareParam=share'
    },
    // 咨询
    consult () {
      window.location.href = '/center/consult'
    },
    // 工具箱
    toolClick () {
       window.location.href = '/toolBox/index?shareParam=share'
    },
    // 轻松一刻
    easyClick () {
      window.location.href = '/center/easy?shareParam=share'
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less" scoped>

.align-middle {
  text-align: center;
}
</style>
